import React, { useState } from 'react';

const Index = () => {
    const [msg, setMsg] = useState("");
    const [arr, setArr] = useState([]);
    const handleChange = (event) => {
        setMsg(event.target.value)
    }
    const handleEnter = (event) => {
        if (event.keyCode === 13) {
            if (!arr.includes(msg)) {
                setArr(() => {
                    arr.push(msg)
                    return [...arr]
                })
            }
            setMsg("")
        }
    }
    const handleDelete = (item) => {
        setArr(() => {
            arr.splice(arr.indexOf(item), 1)
            return [...arr]
        })
    }
    return (
        <div>
            todohook
            <input type="text" value={msg} onChange={handleChange} onKeyUp={handleEnter} />
            <div>
                {
                    arr.map(item => {
                        return (
                            <p key={item}>{item} <button onClick={() => { handleDelete(item) }}>删除</button></p>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Index;